<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

<!-- JS -->
<script type="text/javascript">

	// From: Ridiculously simple accordion without the jQuery UI library (as of 2014/08/06)
	//			 http://uniondesign.ca/simple-accordion-without-jquery-ui/
	// 14/08/06 slideXXX() -> show/hide() to avoid flickering
	// 14/08/07 #accordion -> .accordion to accomodate more than one list
	// 14/08/07 div->dl, h4->dt, div->dd
	
	if (typeof $ != 'undefined') // fail-safe in case jquery is not recognized
	{
		$(document).ready(function() {

			// event handler
			$('.accordion').find('dt').click(function(){
				$(this).next().toggle(); // expand or collapse this panel
				$(this).parent().find('dd').not($(this).next()).hide(); // hide the other panels
			});
			
			// initialize
			$('.accordion').find('dd').hide(); // hide all panels
			$('.accordion').find('dd.accordion-default').show(); // show default block(s)
		});
	}
</script>

<!-- CSS -->
<style>
	dl.accordion dt { cursor: pointer; font-weight: bold; border: dotted gray thin; background-color: oldlace; margin: 0.2em; padding: 0.2em; } /* header title */
	dl.accordion dd { border-left: solid gray thin; padding-left: 0.5em;} /* content */
</style>

</head>
<body>

<!-- HTML -->
<h2>An accordion-style definition list</h2>
<dl class="accordion">
	<dt>Accordion 1</dt>
	<dd>
		<p>Cras malesuada ultrices augue molestie risus.</p>
		<p>Cras malesuada ultrices augue molestie risus.</p>
	</dd>
	<dt>Accordion 2</dt>
	<dd>
		<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
	</dd>
	<dt>Accordion 3</dt>
	<dd>
		<p>Vivamus facilisisnibh scelerisque laoreet.</p>
	</dd>
</dl>

<h2>Another list</h2>
<dl class="accordion">
	<dt>Accordion 1</dt>
	<dd class="accordion-default">
		<p>Cras malesuada ultrices augue molestie risus.</p>
		<p>Cras malesuada ultrices augue molestie risus.</p>
	</dd>
	<dt>Accordion 2</dt>
	<dd>
		<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
	</dd>
	<dt>Accordion 3</dt>
	<dd>
		<p>Vivamus facilisisnibh scelerisque laoreet.</p>
	</dd>
</dl>
</body>
</html>
 
